<!-- 回答问卷 -->
<template>
	<view class="answer">
		<view style="border: 2rpx solid #eee;"></view>
		<!-- 材料背景 -->
		<view class="material">
			<question-header :mid="answers.materials_id"></question-header>
		</view>

		<!-- 上轮回答结果展示 -->
		<view class="answer_round" v-if="answers.round>1">
			<last-result v-if="answers.id" :questionId="answers.id" :round="answers.round"></last-result>
		</view>

		<view class="header">
			<view class="thanks">
				<text style="font-size: 40rpx;font-weight: 700;">问卷信息</text>
				<view class="thanks_item">
					<text style="font-weight: 700;">问卷名称：</text>{{answers.title}}
				</view>
				<view class="thanks_item">
					<text style="font-weight: 700;">问候：</text>{{answers.header}}
				</view>
			</view>
			<view class="formData">
				<u-form :model="formData" :rules="rules" :error-type="errorType" ref="uForm" label-width="auto">
					<!-- 1. 权威系数 -->
					<u-form-item label="对此类物品的熟悉程度：" v-if="answers.round==1">
						<u-radio-group v-model="formData.familiar">
							<u-radio v-for="(item, index) in familiarList" :key="item.name" :name="item.name">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="理论分析：" v-if="answers.round==1">
						<u-radio-group v-model="formData.analysis">
							<u-radio v-for="(item, index) in judgeList" :key="item.name" :name="item.name">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="实践经验：" v-if="answers.round==1">
						<u-radio-group v-model="formData.experience">
							<u-radio v-for="(item, index) in judgeList" :key="item.name" :name="item.name">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="直观感觉：" v-if="answers.round==1">
						<u-radio-group v-model="formData.intuition">
							<u-radio v-for="(item, index) in judgeList" :key="item.name" :name="item.name">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="参考国内外有关资料：" v-if="answers.round==1">
						<u-radio-group v-model="formData.reference_data">
							<u-radio v-for="(item, index) in judgeList" :key="item.name" :name="item.name">
								{{ item.label }}
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<!-- 专业问卷 -->
					<view v-if="answers.round==1">
						<view v-for="(item,index) in configList" :key="item.id"
							:style="{'margin-left':`${50*item.lv}px`}">
							<u-form-item v-if="item.title" :label="item.title" :border-bottom="false">
							</u-form-item>
							<u-form-item v-if="item.type===0" :label="item.name+'：'">
								<u-radio-group v-model="formData.radios[index]">
									<u-radio v-for="radio in (item.options || '').split(',')" :key="radio"
										:name="radio">
										{{ radio }}
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item v-if="item.type===1" :label="item.name+'：'">
								<u-checkbox-group width="50%" @change="checkboxGroupChange($event,index)">
									<u-checkbox v-for="(checkbox) in item.options" :key="checkbox.value"
										:name="checkbox.value" v-model="checkbox.checked">
										{{checkbox.value}}
									</u-checkbox>
								</u-checkbox-group>
							</u-form-item>
							<u-form-item v-if="item.type===2" :label="item.name+'：'">
								<u-input placeholder="请回答" v-model="formData.inputs[index]" border />
							</u-form-item>
						</view>
					</view>

					<!-- 价值评估 -->
					<u-form-item label="最高价值(¥)：" prop="max_value">
						<u-input type="number" v-model="formData.max_value" placeholder="请输入您评估的最高价值" />
					</u-form-item>
					<u-form-item label="给出这个最高价值的原因：" prop="max_reason">
						<u-input type="textarea" v-model="formData.max_reason" placeholder="请输入原因" />
					</u-form-item>
					<u-form-item label="最可能价值(¥)：" prop="possible_value">
						<u-input type="number" v-model="formData.possible_value" placeholder="请输入您评估的最可能价值" />
					</u-form-item>
					<u-form-item label="给出这个最可能价值的原因：" prop="possible_reason">
						<u-input type="textarea" v-model="formData.possible_reason" placeholder="请输入原因" />
					</u-form-item>
					<u-form-item label="最低价值(¥)：" prop="min_value">
						<u-input type="number" v-model="formData.min_value" placeholder="请输入您评估的最低价值" />
					</u-form-item>
					<u-form-item label="给出这个最低价值的原因：" prop="min_reason">
						<u-input type="textarea" v-model="formData.min_reason" placeholder="请输入原因" />
					</u-form-item>
				</u-form>

				<view class="submit">
					<u-button type="primary" shape="circle" size="default" plain :ripple="true" @click="submit">提交回答
					</u-button>
				</view>
			</view>
		</view>
		<view style="border: 2rpx solid #eee;"></view>
	</view>
</template>

<script>
	import QuestionHeader from '@/package_sub/pages/question/answer/comps/question_header.vue'
	import LastResult from '@/package_sub/pages/question/answer/comps/last_result.vue'

	export default {
		components: {
			QuestionHeader,
			LastResult
		},
		data() {
			return {
				answers: {}, // 问卷内容
				configList: [], // 问卷配置列表
				errorType: ['message'], // 文字提示
				rules: {
					max_value: [{
						required: true,
						message: '请填写估价最大值',
						trigger: ['change', 'blur'],
					}],
					max_reason: [{
						required: true,
						message: '请填写原因',
						trigger: ['blur'],
					}, {
						min: 10,
						required: true,
						message: '原因不能少有10个字',
						trigger: ['change'],
					}],
					possible_value: [{
						required: true,
						message: '请填写估价最可能值',
						trigger: ['change', 'blur'],
					}],
					possible_reason: [{
						required: true,
						message: '请填写原因',
						trigger: ['blur'],
					}, {
						min: 10,
						required: true,
						message: '原因不能少有10个字',
						trigger: ['change'],
					}],
					min_value: [{
						required: true,
						message: '请填写估价最小值',
						trigger: ['change', 'blur'],
					}],
					min_reason: [{
						required: true,
						message: '请填写原因',
						trigger: ['blur'],
					}, {
						min: 10,
						required: true,
						message: '原因不能少有10个字',
						trigger: ['change'],
					}],
				}, // 规则配置
				formData: {
					user_id: '',
					question_id: '',
					che: '',
					familiar: 0,
					analysis: 0,
					experience: 0,
					reference_data: 0,
					intuition: 0,
					max_value: '',
					max_reason: '',
					possible_value: '',
					possible_reason: '',
					min_value: '',
					min_reason: '',
					round: 0,
					config_result: '',
					radios: [],
					checkboxs: [],
					inputs: []
				}, // 提交的答案
				familiarList: [{
						name: 0,
						label: '熟悉'
					},
					{
						name: 1,
						label: '较熟悉'
					},
					{
						name: 2,
						label: '一般'
					},
					{
						name: 3,
						label: '不太熟悉'
					},
					{
						name: 4,
						label: '不了解'
					},
				],
				judgeList: [{
						name: 0,
						label: '大'
					},
					{
						name: 1,
						label: '中'
					},
					{
						name: 2,
						label: '小'
					},
				]
			};
		},
		methods: {
			checkboxGroupChange(e, index) {
				this.formData.checkboxs[index] = e.toString()
			},
			initData(index) {
				// 获取用户详情
				this.$u.api.getUserDeatil(this.vuex_user.id).then(res => {
					this.answers = res.data.Questions[index]
					return new Promise((resolve, reject) => {
						resolve({
							id: this.answers.materials_id,
							id2: this.answers.config_id
						})
					})
				}).then(obj => {
					// 获取问卷配置
					this.$u.api.getConfigDetail(obj.id2).then(response => {
						this.configList = response.data.Questionnaires
						this.configList = this.configList.map(it => {
							if (it.type === 1) {
								let temp = it.options.split(',').map(it => {
									return {
										value: it,
										checked: false
									}
								})
								return {
									...it,
									options: temp
								}
							} else {
								return it
							}
						})
					})
				})
			},
			// submit the questionnaire
			submit() {
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					this.formData.round = this.answers.round
					this.formData.user_id = this.vuex_user.id
					this.formData.question_id = this.answers.id
					// obtaining questionnaire content
					let temp = []
					this.configList.forEach((it, index, arr) => {
						if (it.name) {
							if (this.formData.radios[index]) {
								temp.push(it.name + ':' + this.formData.radios[index].toString())
							}
							if (this.formData.checkboxs[index]) {
								temp.push(it.name + ':' + this.formData.checkboxs[index].toString())
							}
							if (this.formData.inputs[index]) {
								temp.push(it.name + ':' + this.formData.inputs[index])
							}
						}
					})
					this.formData.config_result = JSON.stringify(temp)
					// delete radios，checkboxs and inputs
					delete this.formData.radios
					delete this.formData.checkboxs
					delete this.formData.inputs
					this.$u.api.answerQuestion(this.formData).then(res => {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					})
				});
			}
		},
		onHide() {
			// Cache the data filled in by the user
			getApp().globalData.answerData = this.formData
		},
		onShow() {
			// 数据反显
			this.formData = getApp().globalData.answerData
		},
		onLoad(options) {
			this.initData(options.index)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
	}
</script>

<style lang="scss">
	.answer {
		background-color: #eee;

		.material {
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx 20rpx;
			border-radius: 40rpx;
			box-shadow: 6rpx 6rpx 10rpx rgba(215, 245, 255, .8);

			.material_item {
				margin: 6rpx 0;
			}

			.u-flex {
				display: flex;
				align-items: center;
			}
		}

		.answer_round {
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx 20rpx;
			border-radius: 40rpx;
			box-shadow: 10rpx 10rpx 10rpx rgba(230, 230, 230, .8);
		}

		.header {
			.thanks {
				margin: 20rpx;
				background-color: #fff;
				padding: 20rpx 20rpx;
				border-radius: 40rpx;
				box-shadow: 10rpx 10rpx 10rpx rgba(230, 230, 230, .8);

				.thanks_item {
					margin: 6rpx 0;
				}
			}

			.formData {
				background-color: #fff;
				padding: 20rpx 20rpx;
				margin: 20rpx 20rpx;
				border-radius: 40rpx;
				box-shadow: 10rpx 10rpx 10rpx rgba(230, 230, 230, .8);

				.submit {
					margin: 40rpx 40rpx 20rpx 40rpx;
				}
			}

		}
	}
</style>
